<template>
    <h2>添加菜单</h2>
    <div style="text-align: left">
    <h4>选择新增节点的父节点:</h4>
    <el-tree
        :props="props"
        :data="treeNodeList"
        node-key="id"
        ref="treeRef"
        @node-click="hanldNodeClick"
        highlight-current="true"
    >


    <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span>{{ node.label }}</span>
          <div>
            <el-button type="primary" link @click="append(node,data)">
              修改
            </el-button>
            <el-button
              style="margin-left: 4px"
              type="danger"
              link
              @click="remove(node, data)"
            >
              删除
            </el-button>
          </div>
        </div>
      </template></el-tree>
    </div>


    <!-- 添加表单控件 -->
  <el-form :model="menuForm" label-width="120px">
    <el-form-item label="菜单名称">
      <el-input v-model="menuForm.label" style="width: 50%"/>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="subMenuForm">保存</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
  </template>
  
  <script setup>
   import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
//定义tree控件的配置参数
const props={
  id:'id',
  label:'label',
  children:'subMenus'
};
//定义tree控件节点的集合
const treeNodeList=ref([]);


function loadMenuTree(){
  axios.get("http://localhost:8081/listMenus")
      .then((response)=>{
        treeNodeList.value=response.data;
      })
      .catch((error)=>{
        console.log(error);
      })
}

onMounted(function(){
  loadMenuTree()
});

//定义添加菜单的form表单
const menuForm=reactive({
  label:'',
  pid:0
})
var id=0;
//声明变量保存处理添加请求和更新请求的url

function hanldNodeClick(node){
   id =node.id;
   url="http://localhost:8081/saveMenus";
}
function subMenuForm(){
    if(id==0){
    ElMessage("请选择当前新增菜单节点的父节点......");
    return;
  }
  menuForm.pid=id;
  var url="";
  axios.post(url,menuForm)
  .then((response)=>{
    if(response.data.code==200){
      loadMenuTree();//重新渲染树
      id=0;
    }
    ElMessage(response.data.msg);
  })
  .catch((error)=>{
    console.log(error);
  });

}
function remove(node,data){
    if(data.subMenus.length==0){
        let mid=data.id;
    //该节点是叶子节点可以删除
    axios.get("http://localhost:8081/deleteMenus/"+mid)
    .then((response)=>{
      if(response.data.code==200){
        //重新加载tree控件
        loadMenuTree();//重新渲染树
      }
      ElMessage(response.data.msg);
    })
  }else{
    ElMessage(data.label+",节点存在子节点不能删除.......");
  }

}

function append(node,data){
menuForm.label=data.label;
menuForm.id=data.id;
id=node.parent.data.id
  //指定处理更新请求的接口
  url="http://localhost:8081/updateMenus";


}


  </script>
  
  <style scoped>
     ::v-deep .el-tree-node.is-current > .el-tree-node__content {
    background-color:darkblue !important; /* 修改为你想要的颜色 */
  }
  .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
  
  </style>